<template>
  <div id="map-container">
    <offline-map
      ref="offlineMapRef"
      :station-id="stationId"
      :zoom="18"
      :height="100"
      :draw-option="{ fence: true, track: true }"
      @cabinet="handleCabinet"
    />
    <cabinet-model ref="cabinetModel" />
  </div>
</template>

<script setup lang="ts">
  import { watch, ref, onMounted } from 'vue';
  import { useUserStore } from '@/store/modules/user';
  import OfflineMap from '@/views/businessPages/comp/map/offlineMap.vue';
  import CabinetModel from '@/views/home/modals/CabinetModel.vue';

  // 引用组件
  const offlineMapRef = ref();
  const cabinetModel = ref();

  // 用户相关
  const userStore = useUserStore();
  const stationId = ref('');

  // 处理器具箱点击事件
  const handleCabinet = (data) => {
    cabinetModel.value?.show(data);
  };

  // 组件挂载时初始化
  onMounted(() => {
    // 从用户信息中获取站点ID
    stationId.value = userStore.getUserInfo.stationId || '';
    // alert(stationId.value);
  });
</script>

<style scoped>
  #map-container {
    width: 100%;
    height: 100vh;
  }
</style>
